<template>
  <div>
    <div class="people">
      <div
        class="peoplefirst"
        @click="checkCircle(item)"
        v-for="(item, index) in allcirclelist"
        :key="index"
      >
        <img class="peoplefirst-img" :src="item.thumb" alt="" />
        <div class="people-center">
          <div class="people-left">
            <span>{{ item.title }}</span>
            <div class="fs">{{ item.member_num }} 成员</div>
            <span class="fs-xq"></span>
          </div>
          <div class="people-right" @click.stop="handleFocus(item)">
              <span>{{ item.foucs == 0 ? "+加入" : "已加入" }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

  <script>
import { allquanzi, clickFollowFriend } from "@/api/community";
import { time } from "@/config/time";
export default {
  props: {
    allcirclelist: {
      type: Array,
      default: ()=>[],
    },
  },
  data() {
    return {
      focusqz: [],
      selectList: [],
    };
  },
  mounted() {
    this.getCircle();
  },
    methods: {
      checkCircle(item) {
        this.$router.push({
          path: '/circle',
          query: {
            id: item.id
          }
        })
      },
      // 跳转圈子
      gotoclicle(item){
          this.$store.commit("SET_PERLEFTMENUSHOW", false);
            this.$router.push({
            path: "/circle",
            query: {
                 id: item.id,
            },
            });
            // window.open(routeData.href, '_blank');
        },
      // 关注
      handleFocus(item) {
        this.clickFollowFriend(item)
			},
      clickFollowFriend(e) {
				clickFollowFriend({
					foucsid: e.id,
					mid: JSON.parse(localStorage.userInfo).id,
					type: e.foucs == 1 ? 0 : 1, // 0 取消， 1 关注
				}).then(res => {
					if(res.code === 1) {
            this.$emit('upquanziList')
						// this.getCircle()
					}
				})
			},
      // 获取数据
      getCircle(){
        allquanzi({
        mid:JSON.parse(localStorage.userInfo).id,
        page:1,
        pagesize: 10
      }).then(res=> {
        if(res.code == 1){
          // console.log(res,'quanzi');
          for (let i = 0; i < 3; i++) {
            this.selectList.push(res.circledata[i]);
          }
        }
      });
    },
}};
</script>

  <style lang="scss" scoped>
.people {
  padding: 0 7px;
  .peoplefirst {
    height: 71px;
    width: 100%;
    //   border: 1px solid red;
    display: flex;
    .peoplefirst-img {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      margin-right: 7px;
    }
    .people-center {
      width: 100%;
      height: 100%;
      // border: 1px solid red;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-right: 10px;
      .people-left {
        width: 142px;
        font-size: 8px;
        font-weight: 400;
        color: #333333;
        .fs {
          // width: 33px;
          // width: 41px;
          width: auto;
          height: 11px;
          background: #fff8ec;
          border-radius: 2px;
          .peoplefirst-img {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            margin-right: 7px;
          }
          .people-center {
            width: 100%;
            height: 100%;
            // border: 1px solid red;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-right: 10px;
            .people-left {
              width: 142px;
              font-size: 8px;
              font-weight: 400;
              color: #333333;
              .fs {
                // width: 33px;
                // width: 41px;
                width: auto;
                height: 11px;
                background: #fff8ec;
                border-radius: 2px;
                font-size: 7px;
                font-family: Source Han Sans SC;
                font-weight: 400;
                color: #ffa341;
                margin-bottom: 5px;
              }
              .fs-xq {
                font-size: 8px;
                font-weight: 400;
                color: #333333;
                overflow: hidden;
                text-overflow: ellipsis; /* 文本溢出时显示省略号来代表被修剪的文本 */
                display: -webkit-box; /* 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 */
                -webkit-box-orient: vertical; /* 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 */
                -webkit-line-clamp: 1;
              }
            }
            .people-right {
              // width: 32px;
              cursor: pointer;
              padding: 0 5px;
              height: 14px;
              border: 1px solid #fd5151;
              border-radius: 7px;
              font-size: 7px;
              font-family: Source Han Sans SC;
              font-weight: 400;
              color: #ffa341;
              margin-bottom: 5px;
            }
            .fs-xq {
              font-size: 8px;
              font-weight: 400;
              color: #333333;
              overflow: hidden;
              text-overflow: ellipsis; /* 文本溢出时显示省略号来代表被修剪的文本 */
              display: -webkit-box; /* 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 */
              -webkit-box-orient: vertical; /* 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 */
              -webkit-line-clamp: 1;
            }
          }
          .people-right {
            // width: 32px;
            padding: 0 5px;
            height: 14px;
            border: 1px solid #fd5151;
            border-radius: 7px;
            font-size: 7px;
            font-family: Source Han Sans SC;
            font-weight: 400;
            color: #fd5151;
            text-align: center;
            line-height: 14px;
          }
        }
      }
    }
  }
}
</style>
